<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡切换</title>
  <style>
      ul {
          list-style: none;
          display: flex;
          /*justify-content: space-around;*/
          margin: 0;
          padding: 0;
      }

      ul li {
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #ccc;
          cursor: pointer;
          user-select: none;
      }

      li:hover {
          background-color: orange;
      }

      .img img {
          /*display: block;*/
          width: 400px;
          height: 400px;
      }

      .active {
          background-color: orange;
      }
  </style>
</head>
<body>
<ul>
  <li tabindex="0">modx</li>
  <li tabindex="1">搜索</li>
  <li tabindex="2">Vue</li>
  <li tabindex="3">杨超越</li>
</ul>
<div class="img">
  <img alt="" src="../img/modx.png">
  <img alt="" src="../img/sou.png">
  <img alt="" src="../img/vue.png">
  <img alt="" src="../img/ycy.png">
</div>
</body>
<script>
  // 移动到哪个li上，就显示哪个li对应的图片
  let lis = document.getElementsByTagName('li');
  let imgs = document.getElementsByTagName('img');
  // for (let i = 0; i < lis.length; i++) {
  //   lis[i].onmouseover = function () {
  //     for (let j = 0; j < imgs.length; j++) {
  //       imgs[j].style.display = 'none';
  //     }
  //     imgs[i].style.display = 'block';
  //   }
  // }

  window.onload = function () {
    for (let i = 0; i < lis.length; i++) {
      lis[i].className = '';
      imgs[i].style.display = 'none';
    }
  }

  // 使用事件委托实现
  let ul = document.getElementsByTagName('ul')[0];
  ul.onclick = function (e) {
    let target = e.target;
    if (target.nodeName === 'LI') {
      for (let i = 0; i < lis.length; i++) {
        lis[i].className = '';
        imgs[i].style.display = 'none';
      }
      target.className = 'active';
      imgs[target.tabIndex].style.display = 'block';
    }
  }

</script>
</html>